<template>
  <div id="celling">
    <!-- logo image div -->
    <div class="img-div">
      <img v-bind:src="logo.imgUrl" class="logo"/>
    </div>

    <!-- user info div -->
    <div class="user-info">
      <!--user toolbar div-->
      <div class="user-toolbar clearfloat">
        <ul class="clearfloat">
          <li href="#" title="日历"><i class="fa fa-calendar fa-2x"></i></li>
          <li href="#" title="在线人员"><i class="fa fa-users fa-2x" aria-hidden="true"></i></li>
          <li href="#" title="常用软件"><i class="fa fa-th-large fa-2x" aria-hidden="true"></i></li>
          <li href="#" title="即时消息"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i></li>
          <li href="#" title="消息订阅"><i class="fa fa-rss-square fa-2x" aria-hidden="true"></i></li>
          <li href="#" title="系统消息"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></li>
        </ul>
      </div>

      <!-- user set menu div -->
      <div class="user-set-menu">
        <a href="javascript:void(0);" class="clearfloat" @click="run">
          <em></em>
          <span>系统管理员</span>
        </a>
      </div>
    </div>


    <!--<img src="../assets/logo.png"/>-->
  </div>
</template>

<script>
  export default {
    name: "celling",
    data() {
      return {
        logo: {
          imgUrl: "/static/images/logo.png"
        },
        calendar: {
          imgUrl: ""
        }
      }
    },
    methods:{
      run () {
        alert(100);
      }
    }
  }
</script>

<style scoped>
  #celling {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #303f59;
    background: #34445e url(/static/images/topheaderbg.png);
    border-bottom: 1px solid #303f59;
  }

  /** log image css **/
  .img-div {
    float: left;
    width: 50%;
    padding-left: 45px;
    height: 58px;
  }

  .img-div .logo {
    margin-left: 0;
  }

  /** userinfo css **/
  .user-info {
    float: right;
    /*height: 58px;*/
    /*border: 1px solid red;*/
  }

  .user-info .user-toolbar {
    float: left;
    line-height: 58px;
  }

  .user-info .user-toolbar ul {
    padding: 0;
    margin: 0;
  }

  .user-info .user-toolbar ul li {
    float: left;
    color: #99a3a6;
    list-style: none;
    padding: 2px 6px;
    margin: 5px;
  }

  .user-info .user-toolbar ul li:hover {
    color: #FFF;
    cursor: pointer;
    /*font-size: 10px;*/
  }

  .user-info .user-set-menu {
    margin: 9px 60px 9px 0;
    float: left;
    border: 1px solid #32415a;
    color: #99a3a6;
    background-color: #32415a;
    border-radius: 3px;
  }

  .user-info .user-set-menu a em {
    margin: 5px 10px auto 10px;
    width: 26px !important;
    height: 26px !important;
    /*display: inline-block;*/
    background-position: center center;
    background-size: 26px 26px;
    background-image: url('/static/images/3.png');
    float: left;
  }

  .user-info .user-set-menu a span {
    height: 26px !important;
    float: left;
  }

  .user-info .user-set-menu a {
    margin: 0;
    padding-right: 10px;
    line-height: 38px !important;
    height: 38px;
    display: block;
    color: #99a3a6;
  }
  .user-info .user-set-menu a:hover{
    color:#fff;
  }
</style>
